<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维描述svg</title>
</head>

<body>
    <!-- 动画几乎都存在兼容性 -->
    <!-- 矩形 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="50" y="20" rx="40" ry="20" width="150" height="150"
            style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
        <!-- 矩形 位置坐标(距离左边和上边距离)50,20  x轴边角弧宽度40x y弧高20px，整体透明度0.5 -->
    </svg>

    <!-- 渐变矩形 存在兼容性-->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="20" y="20" width="250" height="250" style="fill:blue">
            <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
            <!-- 属性类型CSS， 属性名opacity ，from 1 to 0 用时5s 次数无限  -->
        </rect>
    </svg>

    <!-- 矩形渐变 存在兼容性 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">
            <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" />
            <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" />
            <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" />
            <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" />
            <animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s"
                fill="freeze" />
            <!-- animateColor 弃用  -->
        </rect>
    </svg>

    <!-- 文本移动 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g transform="translate(100,100)">
            <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> It's SVG!
                <animateMotion path="M 0 0 L 100 100" dur="5s" fill="freeze" />
            </text>
        </g>
    </svg>

    <!-- 移动、旋转并缩放的文本 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g transform="translate(100,100)">
            <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
                <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" />
                <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" />
                <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0"
                    begin="1s" dur="5s" fill="freeze" />
                <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3"
                    additive="sum" begin="1s" dur="5s" fill="freeze" />
            </text>
        </g>
    </svg>

    <!-- 圆形 circle -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
        <!--circle圆 中心点（忽略时为0，0） cx: x轴100px cy：y轴50px r半径40px 轮廓black黑色 宽度2px fill填充red红色 -->
    </svg>

    <!-- 五角星 多边形 polygon-->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
        <polygon points="100,10 40,180 190,60 10,60 160,180"
            style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
        <!-- polygon 多边形 points 两两一组点的坐标位置 fill-rule：填充规则 evenodd线点封闭的填充，nonzero全填充  inherit默认-->
    </svg>

    <!-- 椭圆 sllipse svg默认宽300，高150 超出隐藏 椭圆可花圆，圆不可花椭圆没有r默认半径0-->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <ellipse cx="150" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
        <!-- 中心坐标300,80 x轴半径100，y轴半径50 -->
    </svg>
    <br />

    <!-- 直线 line -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
        <!-- 0,0 开始 200,200 结束 -->
    </svg>

    <!-- 多段折线 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <path d="M150 0 L75 200 L225 200 Z" />
        <!-- d描述，绝对定位150, 0 开始，到后续点。。Z关闭路径 -->
    </svg>


    <!--  大写表示绝对定位，小写表示相对定位，相对定位总是基于前一个点
        M = moveto
        L = lineto
        H = horizontal lineto
        V = vertical lineto
        C = curveto
        S = smooth curveto
        Q = quadratic Bézier curve
        T = smooth quadratic Bézier curveto
        A = elliptical Arc   椭圆弧
        Z = closepath


        轮廓颜色  stroke
        轮廓宽度  stroke-width
        轮廓类型  stroke-linecap  butt（边缘留白） | round（弧角） | square （常规默认）
        创建虚线  stroke-dasharray 实线长度，空白长度，来回间错（指定为奇数个数，首轮第一个是实线长度，第二轮就是空白长度）,如下：
    -->

    <!-- 路径式 直线 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none">
            <path stroke="red" d="M5 20 l215 0" />
            <path stroke="black" d="M5 40 l215 0" />
            <path stroke="blue" d="M5 60 l215 0" />
        </g>
    </svg>
    <!-- 路径 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="black" stroke-width="4">
            <path stroke-dasharray="5,5" d="M5 20 l215 0" />
            <path stroke-dasharray="10,10" d="M5 40 l215 0" />
            <path stroke-dasharray="20,10,5,5,5" d="M5 60 l215 0" />
        </g>
    </svg>

    <!-- 文本 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
        <!-- 坐标为文本右下角的位置 transform-rotate：动画-旋转角度 坐标基点逗号分隔 -->
    </svg>

    <!-- 路径上的文字 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
            <!-- M75,20路径的起点坐标  圆弧的直径100px,半径50px -->
        </defs>
        <text x="10" y="100" style="fill:red;">
            <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
            <!-- xlink：href连接路径的id名 -->
        </text>
    </svg>

    <!-- 多行文本 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <text x="10" y="20" style="fill:red;">Several lines:
            <tspan x="10" y="45">First line</tspan>
            <tspan x="10" y="70">Second line</tspan>
        </text>
    </svg>

    <!-- 矩形、圆、文本组合 -->
    <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
        <!-- version：svg版本号  xmlns：svg命名空间-->
        <rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />
        <!-- rect 矩形  多个按编写的顺序显示，后面盖住前面的 -->
        <circle cx="150" cy="100" r="80" fill="green" />

        <text x="150" y="115" font-size="16" text-anchor="middle" fill="white">RUNOOB SVG TEST</text>
        <!-- text 文本，中心位置 x: 150px y: 115px  text-anchor: 文本基线  fill：填充文本颜色 -->
    </svg>

    <!-- 填充和轮廓透明度分开 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="50" y="20" width="150" height="150"
            style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
    </svg>

    <!-- 贝塞尔曲线-->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
        <path d="M 100 250 q 150 -200 300 100" stroke="blue" stroke-width="5" fill="none" />
        <!-- M贝塞尔开始位置 ，小写q相对位置顶点，300 100 相对于起点的结束点 -->
    </svg>

    <!-- 贝塞尔完整曲线标注 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
        <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
        <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
        <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
        <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
        <!-- Mark relevant points -->
        <g stroke="black" stroke-width="3" fill="black">
            <!-- 参考线，高度二分之一 -->
            <circle id="pointA" cx="100" cy="350" r="3" />
            <circle id="pointB" cx="250" cy="50" r="3" />
            <circle id="pointC" cx="400" cy="350" r="3" />
        </g>
        <!-- Label the points -->
        <g font-size="20" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
            <text x="100" y="350" dx="-30">A 起点</text>
            <text x="250" y="50" dy="-10">B 依托点</text>
            <text x="400" y="350" dx="-30">C 相对于起点的终点</text>
        </g>
    </svg>


    <!-- svg可通过 <embed>、<object> 或者 <iframe>。引入 -->
    <embed src="circle1.svg" type="image/svg+xml" /><iframe src="circle1.svg"></iframe>
    <!-- 可用脚本，H5使用 -->

    <object data="circle1.svg" type="image/svg+xml"></object>
    <!-- 通用，但不支持脚本 -->

    <!-- 文本连接，点击跳转 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
        <a xlink:href="http://www.w3schools.com/svg/" target="_blank">
            <text x="0" y="15" fill="red">I love SVG</text>
        </a>
    </svg>

    <a href="circle1.svg">查看 SVG 文件</a>
    <!-- 连接svg -->
    <br />

    <!-- 
    SVG可用的滤镜是：

        feBlend - 与图像相结合的滤镜 混合偏移图像顶部，必须有，否则看不到上层
        feColorMatrix - 用于彩色滤光片转换
        feComponentTransfer
        feComposite
        feConvolveMatrix：滤镜（底层）上色
        <feColorMatrix result = "matrixOut" in = "offOut" type = "matrix" values = "
            1 0 0 0 0 
            0 1 0 0 0 
            0 0 1 0 0 
            0 0 0 1 0"/>
        feColorMatrix 的 matrix 是一个 4*5 的矩阵。前面 4 列是颜色通道的比例系数，最后一列是常量偏移
        <feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色。 '0.2'矩阵的三个值都获取乘以红色，绿色和蓝色通道。降低其值带来的颜色至黑色（黑色为0）
        feDiffuseLighting
        feDisplacementMap
        feFlood
        feGaussianBlur  元素定义模糊效果 stdDeviation="10"属性决定
        feImage
        feMerge
        feMorphology
        feOffset - 元素是用于创建阴影效 过滤阴影 
        <feOffset>元素的属性改为"SourceAlpha"在Alpha通道使用残影，而不是整个RGBA像素。
        feSpecularLighting
        feTile
        feTurbulence
        feDistantLight - 用于照明过滤
        fePointLight - 用于照明过滤
        feSpotLight - 用于照明过滤

    标签 :如下示例
        <defs>元素定义短并含有特殊元素（如滤镜）定义。
        <filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜
        <feGaussianBlur>元素定义模糊效果
    -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="f1" x="0" y="0">
                <!-- <filter>元素id属性定义一个滤镜的唯一名称 -->
                <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
                <!-- 滤镜定义 in="SourceGraphic"这个部分定义了由整个图像创建的模糊背景效果颜色  "SourceAlpha"黑色
                    stdDeviation属性定义模糊量-->
            </filter>
        </defs>
        <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
        <!-- filter：连接滤镜id <rect>元素的滤镜属性用来把元素链接到"f1"滤镜 -->
    </svg>

    <!-- feOffset偏移  feGaussianBlur 模糊度定义-->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="f1" x="0" y="0" width="200%" height="200%">
                <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
                <!-- dx：下层水平偏移20px dy: 下层y轴偏移20px -->
                <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
                <!-- 必须放在offset和end之间，才有作用 stdDeviation模糊程度必须有，否则没任何效果 -->
                <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
                <!-- in="SourceGraphic"这个部分定义了由整个图像创建效果 是否可连接外层图像 -->
            </filter>
        </defs>
        <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
    </svg>

    <!-- 椭圆线性(水平)渐变 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                <!-- X1，X2，Y1，Y2属性定义渐变开始和结束位置  -->
                <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
                <!-- 渐变每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。0-100过渡 -->
                <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
            </linearGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
    </svg>
    <!-- 
        <linearGradient>元素用于定义线性渐变。
        <linearGradient>标签必须嵌套在<defs>的内部。
        <defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
        线性渐变可以定义为水平，垂直或角渐变：

        当y1和y2相等，而x1和x2不同时，可创建水平渐变
        当x1和x2相等，而y1和y2不同时，可创建垂直渐变
        当x1和x2不同，且y1和y2不同时，可创建角形渐变
    -->

    <!-- 椭圆放射性渐变 径向渐变 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                <!-- 属性影响较大
                     CX，CY和r属性定义的最外层圆（颜色变化的终点）
                     Fx和Fy定义的最内层圆（的中心点，可理解为起点） 百分比是相对于svg宽高，， -->
                <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
                <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
                <!-- 白色到蓝色 -->
            </radialGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
        <!-- 填充属性把ellipse元素链接到此渐变 -->
    </svg>
    <!-- 
    <radialGradient>元素用于定义放射性渐变。
    <radialGradient>标签必须嵌套在<defs>的内部。
    <defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
    -->
</body>

</html>